React Server Actions: Pemrosesan Formulir Sisi Server Disederhanakan

React Server Actions, diperkenalkan di React 18 dan ditingkatkan secara signifikan di Next.js, menawarkan pendekatan revolusioner untuk menangani pengiriman formulir dan mutasi data langsung di server. Fitur canggih ini menyederhanakan proses pengembangan, meningkatkan keamanan, dan memperbaiki kinerja dibandingkan dengan pengambilan dan manipulasi data sisi klien tradisional.

Apa itu React Server Actions?

Server Actions adalah fungsi asinkron yang berjalan di server dan dapat dipanggil langsung dari komponen React. Fitur ini memungkinkan Anda untuk melakukan tugas-tugas sisi server, seperti:

• Pengiriman Formulir: Memproses data formulir secara aman di server.
• Mutasi Data: Memperbarui basis data atau API eksternal.
• Autentikasi: Menangani login dan registrasi pengguna.
• Logika Sisi Server: Menjalankan logika bisnis yang kompleks tanpa menampilkannya ke klien.

Keuntungan utama dari Server Actions adalah memungkinkan Anda untuk menulis kode sisi server di dalam komponen React Anda, menghilangkan kebutuhan akan rute API terpisah dan logika pengambilan data sisi klien yang kompleks. Kolokasi antara UI dan logika sisi server ini menghasilkan basis kode yang lebih mudah dipelihara dan efisien.

Manfaat Menggunakan React Server Actions

Menggunakan React Server Actions memberikan beberapa manfaat signifikan:

Pengembangan yang Disederhanakan

Server Actions mengurangi kode boilerplate dengan memungkinkan Anda menangani pengiriman formulir dan mutasi data langsung di dalam komponen React Anda. Ini menghilangkan kebutuhan akan endpoint API terpisah dan logika pengambilan data sisi klien yang kompleks, menyederhanakan proses pengembangan dan membuat kode Anda lebih mudah dipahami dan dipelihara. Pertimbangkan formulir kontak sederhana. Tanpa Server Actions, Anda memerlukan rute API terpisah untuk menangani pengiriman formulir, JavaScript sisi klien untuk mengirim data, dan logika penanganan kesalahan di sisi klien dan server. Dengan Server Actions, semua ini dapat ditangani di dalam komponen itu sendiri.

Keamanan yang Ditingkatkan

Dengan menjalankan kode di server, Server Actions mengurangi permukaan serangan aplikasi Anda. Data sensitif dan logika bisnis dijauhkan dari klien, mencegah pengguna jahat merusaknya. Sebagai contoh, kredensial basis data atau kunci API tidak pernah terekspos dalam kode sisi klien. Semua interaksi basis data terjadi di server, mengurangi risiko injeksi SQL atau akses data yang tidak sah.

Kinerja yang Ditingkatkan

Server Actions dapat meningkatkan kinerja dengan mengurangi jumlah JavaScript yang perlu diunduh dan dieksekusi di klien. Ini sangat bermanfaat bagi pengguna di perangkat berdaya rendah atau dengan koneksi internet lambat. Pemrosesan data terjadi di server, dan hanya pembaruan UI yang diperlukan yang dikirim ke klien, menghasilkan pemuatan halaman yang lebih cepat dan pengalaman pengguna yang lebih lancar.

Pembaruan Optimistis

Server Actions terintegrasi dengan mulus dengan Suspense dan Transitions dari React, memungkinkan pembaruan optimistis. Pembaruan optimistis memungkinkan Anda untuk memperbarui UI secara langsung, bahkan sebelum server mengonfirmasi tindakan tersebut. Ini memberikan pengalaman pengguna yang lebih responsif dan menarik, karena pengguna tidak perlu menunggu server merespons sebelum melihat hasil tindakan mereka. Dalam e-commerce, menambahkan item ke keranjang belanja dapat ditampilkan segera sementara server mengonfirmasi penambahan di latar belakang.

Peningkatan Progresif

Server Actions mendukung peningkatan progresif, yang berarti aplikasi Anda tetap dapat berfungsi meskipun JavaScript dinonaktifkan atau gagal dimuat. Ketika JavaScript dinonaktifkan, formulir akan dikirim sebagai formulir HTML tradisional, dan server akan menangani pengiriman dan mengarahkan pengguna ke halaman baru. Ini memastikan bahwa aplikasi Anda tetap dapat diakses oleh semua pengguna, terlepas dari konfigurasi peramban atau kondisi jaringan mereka. Hal ini sangat penting untuk aksesibilitas dan SEO.

Cara Menggunakan React Server Actions

Untuk menggunakan React Server Actions, Anda perlu menggunakan kerangka kerja yang mendukungnya, seperti Next.js. Berikut adalah panduan langkah demi langkah:

1. Definisikan Server Action

Buat fungsi asinkron yang akan berjalan di server. Fungsi ini harus menangani logika yang ingin Anda eksekusi di server, seperti memperbarui basis data atau memanggil API. Tandai fungsi dengan direktif `"use server"` di bagian atas untuk menunjukkan bahwa itu adalah Server Action. Direktif ini memberitahu kompiler React untuk memperlakukan fungsi tersebut sebagai fungsi sisi server dan secara otomatis menangani serialisasi dan deserialisasi data antara klien dan server.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Penjelasan:

• Direktif `'use server'` menandai fungsi ini sebagai Server Action.
• `revalidatePath('/')` membersihkan cache rute, memastikan data yang diperbarui diambil pada permintaan berikutnya. Ini sangat penting untuk menjaga konsistensi data.
• `saveMessage(message)` adalah placeholder untuk logika interaksi basis data Anda yang sebenarnya. Ini mengasumsikan Anda memiliki fungsi `saveMessage` yang didefinisikan di tempat lain untuk menangani penyimpanan pesan ke basis data Anda.
• Fungsi ini mengembalikan objek state yang dapat digunakan untuk menampilkan umpan balik kepada pengguna.

2. Impor dan Gunakan Server Action di Komponen Anda

Impor Server Action ke dalam komponen React Anda dan gunakan sebagai prop `action` pada elemen formulir. Hook `useFormState` dapat digunakan untuk mengelola state formulir dan menampilkan umpan balik kepada pengguna.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Penjelasan:

• Direktif `'use client'` menentukan bahwa ini adalah Komponen Klien (karena menggunakan `useFormState`).
• `useFormState(createMessage, {message: ''})` menginisialisasi state formulir dengan Server Action `createMessage`. Argumen kedua adalah state awal.
• Prop `action` dari elemen `form` diatur ke `formAction` yang dikembalikan oleh `useFormState`.
• Variabel `state` berisi nilai kembalian dari Server Action, yang dapat digunakan untuk menampilkan umpan balik kepada pengguna.

3. Menangani Data Formulir

Di dalam Server Action, Anda dapat mengakses data formulir menggunakan `FormData` API. API ini menyediakan cara yang mudah untuk mengakses nilai-nilai dari field formulir.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Menangani Kesalahan

Gunakan blok `try...catch` untuk menangani kesalahan yang mungkin terjadi selama eksekusi Server Action. Kembalikan pesan kesalahan dalam objek state untuk menampilkannya kepada pengguna.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Memvalidasi Ulang Data

Setelah Server Action berhasil memutasi data, Anda mungkin perlu memvalidasi ulang cache data untuk memastikan bahwa UI mencerminkan perubahan terbaru. Gunakan fungsi `revalidatePath` atau `revalidateTag` dari `next/cache` untuk memvalidasi ulang path atau tag tertentu.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Penggunaan Tingkat Lanjut

Memutasi Data

Server Actions sangat cocok untuk memutasi data, seperti memperbarui basis data atau API eksternal. Anda dapat menggunakan Server Actions untuk menangani mutasi data kompleks yang memerlukan logika sisi server, seperti memvalidasi data, melakukan perhitungan, atau berinteraksi dengan beberapa sumber data. Pertimbangkan skenario di mana Anda perlu memperbarui profil pengguna dan mengirim email konfirmasi. Server Action dapat menangani pembaruan basis data dan proses pengiriman email dalam satu operasi atomik tunggal.

Autentikasi dan Otorisasi

Server Actions dapat digunakan untuk menangani autentikasi dan otorisasi. Dengan melakukan pemeriksaan autentikasi dan otorisasi di server, Anda dapat memastikan bahwa hanya pengguna yang berwenang yang memiliki akses ke data dan fungsionalitas sensitif. Anda dapat menggunakan Server Actions untuk menangani login pengguna, pendaftaran, dan pengaturan ulang kata sandi. Sebagai contoh, Server Action dapat memverifikasi kredensial pengguna terhadap basis data dan mengembalikan token yang dapat digunakan untuk mengautentikasi permintaan berikutnya.

Edge Functions

Server Actions dapat di-deploy sebagai Edge Functions, yang berjalan di jaringan server global yang dekat dengan pengguna Anda. Ini dapat secara signifikan mengurangi latensi dan meningkatkan kinerja, terutama untuk pengguna di lokasi yang tersebar secara geografis. Edge Functions ideal untuk menangani Server Actions yang memerlukan latensi rendah, seperti pembaruan data waktu nyata atau pengiriman konten yang dipersonalisasi. Next.js menyediakan dukungan bawaan untuk men-deploy Server Actions sebagai Edge Functions.

Streaming

Server Actions mendukung streaming, yang memungkinkan Anda mengirim data ke klien dalam potongan-potongan saat tersedia. Ini dapat meningkatkan kinerja yang dirasakan dari aplikasi Anda, terutama untuk Server Actions yang membutuhkan waktu lama untuk dieksekusi. Streaming sangat berguna untuk menangani kumpulan data besar atau perhitungan yang kompleks. Sebagai contoh, Anda dapat melakukan streaming hasil pencarian ke klien saat data diambil dari basis data, memberikan pengalaman pengguna yang lebih responsif.

Praktik Terbaik

Berikut adalah beberapa praktik terbaik yang harus diikuti saat menggunakan React Server Actions:

• Jaga agar Server Actions tetap kecil dan terfokus: Setiap Server Action harus melakukan satu tugas tunggal yang terdefinisi dengan baik. Ini membuat kode Anda lebih mudah dipahami, diuji, dan dipelihara.
• Gunakan nama yang deskriptif: Pilih nama yang dengan jelas menunjukkan tujuan dari Server Action. Contohnya, `createComment` atau `updateUserProfile` lebih baik daripada nama generik seperti `processData`.
• Validasi data di server: Selalu validasi data di server untuk mencegah pengguna jahat menyuntikkan data yang tidak valid ke dalam aplikasi Anda. Ini termasuk memvalidasi tipe data, format, dan rentang.
• Tangani kesalahan dengan baik: Gunakan blok `try...catch` untuk menangani kesalahan dan memberikan pesan kesalahan yang informatif kepada pengguna. Hindari mengekspos informasi kesalahan yang sensitif kepada klien.
• Gunakan pembaruan optimistis: Berikan pengalaman pengguna yang lebih responsif dengan memperbarui UI secara langsung, bahkan sebelum server mengonfirmasi tindakan tersebut.
• Validasi ulang data sesuai kebutuhan: Pastikan bahwa UI mencerminkan perubahan terbaru dengan memvalidasi ulang cache data setelah Server Action memutasi data.

Contoh Dunia Nyata

Mari kita pertimbangkan beberapa contoh dunia nyata tentang bagaimana React Server Actions dapat digunakan dalam berbagai jenis aplikasi:

Aplikasi E-commerce

• Menambahkan item ke keranjang belanja: Server Action dapat menangani penambahan item ke keranjang belanja pengguna dan memperbarui total keranjang di basis data. Pembaruan optimistis dapat digunakan untuk segera menampilkan item di keranjang.
• Memproses pembayaran: Server Action dapat menangani pemrosesan pembayaran menggunakan gateway pembayaran pihak ketiga. Server Action juga dapat memperbarui status pesanan di basis data dan mengirim email konfirmasi kepada pengguna.
• Mengirim ulasan produk: Server Action dapat menangani pengiriman ulasan produk dan menyimpannya ke basis data. Server Action juga dapat menghitung peringkat rata-rata untuk produk tersebut dan memperbarui halaman detail produk.

Aplikasi Media Sosial

• Membuat tweet baru: Server Action dapat menangani pembuatan tweet baru dan menyimpannya ke basis data. Server Action juga dapat memperbarui linimasa pengguna dan memberi tahu pengikut mereka.
• Menyukai sebuah kiriman: Server Action dapat menangani penyukaan kiriman dan memperbarui jumlah suka di basis data. Pembaruan optimistis dapat digunakan untuk segera menampilkan jumlah suka yang diperbarui.
• Mengikuti seorang pengguna: Server Action dapat menangani proses mengikuti pengguna dan memperbarui jumlah pengikut dan yang diikuti di basis data.

Sistem Manajemen Konten (CMS)

• Membuat postingan blog baru: Server Action dapat menangani pembuatan postingan blog baru dan menyimpannya ke basis data. Server Action juga dapat menghasilkan slug untuk postingan tersebut dan memperbarui sitemap.
• Memperbarui halaman: Server Action dapat menangani pembaruan halaman dan menyimpannya ke basis data. Server Action juga dapat memvalidasi ulang cache halaman untuk memastikan bahwa konten yang diperbarui ditampilkan kepada pengguna.
• Menerbitkan perubahan: Server Action dapat menangani penerbitan perubahan ke basis data dan memberi tahu semua pelanggan.

Pertimbangan Internasionalisasi

Saat mengembangkan aplikasi untuk audiens global, penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (l10n). Berikut adalah beberapa pertimbangan untuk menggunakan React Server Actions dalam aplikasi yang diinternasionalisasi:

• Menangani format tanggal dan waktu yang berbeda: Gunakan `Intl` API untuk memformat tanggal dan waktu sesuai dengan lokal pengguna.
• Menangani format angka yang berbeda: Gunakan `Intl` API untuk memformat angka sesuai dengan lokal pengguna.
• Menangani mata uang yang berbeda: Gunakan `Intl` API untuk memformat mata uang sesuai dengan lokal pengguna.
• Menerjemahkan pesan kesalahan: Terjemahkan pesan kesalahan ke dalam bahasa pengguna.
• Mendukung bahasa kanan-ke-kiri (RTL): Pastikan aplikasi Anda mendukung bahasa RTL, seperti Arab dan Ibrani.

Sebagai contoh, saat memproses formulir yang memerlukan input tanggal, Server Action dapat menggunakan `Intl.DateTimeFormat` API untuk mengurai tanggal sesuai dengan lokal pengguna, memastikan bahwa tanggal ditafsirkan dengan benar terlepas dari pengaturan regional pengguna.

Kesimpulan

React Server Actions adalah alat yang ampuh untuk menyederhanakan pemrosesan formulir sisi server dan mutasi data dalam aplikasi React. Dengan memungkinkan Anda menulis kode sisi server langsung di dalam komponen React, Server Actions mengurangi kode boilerplate, meningkatkan keamanan, meningkatkan kinerja, dan memungkinkan pembaruan optimistis. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat memanfaatkan Server Actions untuk membangun aplikasi React yang lebih tangguh, terukur, dan mudah dipelihara. Seiring dengan terus berkembangnya React, Server Actions tidak diragukan lagi akan memainkan peran yang semakin penting di masa depan pengembangan web.